<template>
    <el-form  :model="model" ref="finDetForm" :inline="true" label-width="72px" :label-position="'left'" >
      <el-row class="search-title">条件搜索</el-row>
      <el-form-item prop="account_orgname">
        <el-input readonly @click.native="handleSelectDwName" placeholder="请选择单位" v-model="model.account_orgname"
                  prefix-icon="el-icon-search"></el-input>
      </el-form-item>
      <el-form-item> <el-button class="btn-search" type="primary"  @click="handleQueryFinDetail">搜索
      </el-button></el-form-item>
      <collapse-vertical>
      <div v-show="isDisplay">
      <el-form-item prop="account_place" label=" 泊位编号">
       <el-input  class="" placeholder="泊位编号" v-model="model.account_place" clearable></el-input>
      </el-form-item>
      <el-form-item prop="account_no" label="停车流水号">
        <el-input  placeholder="停车流水号" v-model="model.account_no" clearable></el-input>
      </el-form-item>
      <el-form-item prop="account_carno" label="车牌号">
        <el-input  placeholder="车牌号" v-model="model.account_carno" clearable></el-input>
      </el-form-item>
      <div>
    <el-form-item prop="account_parkname" label="停车场">
      <el-input readonly @click.native="handleSelectParkName" placeholder="请选择停车场" v-model="model.account_parkname"></el-input>
    </el-form-item>
    <el-form-item prop="account_chargeunitname" label="路段">
      <el-input readonly @click.native="handleSelectRoadName" placeholder="请选择路段" v-model="model.account_chargeunitname"></el-input>
    </el-form-item>
    <el-form-item prop="account_username" label="人员">
      <el-input readonly @click.native="handleSelectPerName" placeholder="请选择人员" v-model="model.account_username   "></el-input>
    </el-form-item>
      </div>
      <div>
        <el-form-item prop="account_cartype" label="车辆类型">
          <el-radio-group v-model="model.account_cartype" size="small">
            <el-radio   v-for="(item,ids) in cartypes" :key="ids" :label="item.id" >{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
        <el-row>
        <el-form-item prop="account_epaytype">
          <el-col style="width: 75px">
          <span style="font-size: 12px; font-weight: bold; color: #7A7A7A;">支付类型</span>
          </el-col>
          <el-checkbox-group  v-model="model.account_epaytype" label-width="0px" >
            <el-checkbox  v-for="(item,ids) in paytypes" :key="ids" :label="item.id" >{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        </el-row>
    <el-form-item prop="rangeTime" label="流水区间">
      <el-date-picker
        v-model="model.rangeTime" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="pickerOptions" clearable format="yyyy年MM月dd日" value-format="yyyy-MM-dd">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button class="btn-mini-form"  @click="handleQueryFinDetail"
               size="mini" >提交
      </el-button>
      <el-button class="btn-mini-form"  @click="handleResetFinDetail"
               size="mini" >重置
      </el-button>
    </el-form-item>
    </div>
      </collapse-vertical>
      <person-child-dialog-dw :dialogDwVisible.sync="dialogDwVisible" :dwType="0" @dwName="selectDwName"></person-child-dialog-dw>
      <person-child-dialog-road :dialogRoadVisible.sync="dialogRoadVisible" @roadName="selectRoadName"></person-child-dialog-road>
      <person-select-dialog :dialogSelectPerVisible.sync="dialogSelectPerVisible" @selectPer="selectPer"></person-select-dialog>
      <parking-dialog :parkingVisible.sync="parkingVisible" @parkName="selectParkName"></parking-dialog>
      <el-row style="text-align: center"><el-button style="border: none;background-color: transparent" size="small" @click="isShow" :icon="isDisplay?'el-icon-arrow-up':'el-icon-arrow-down'">
      </el-button></el-row>
    </el-form>
</template>

<script>
  /* eslint-disable */
  import ElFormItem from "element-ui/packages/form/src/form-item";
  import PersonChildDialogDw from "../../organizationManagement/personChild/personChildDialogDw";
  import PersonChildDialogRoad from "../../organizationManagement/personChild/personChildDialogRoad";
  import PersonSelectDialog from "../../organizationManagement/organizationChild/personSelectDialog";
  import ParkingDetailDialog from "../../operatingManagement/parkingflowChild/parkingDetailDialog";
  import ParkingDialog from "../../operatingManagement/parkingflowChild/parkingDialog";
  import ElButton from "element-ui/packages/button/src/button";
  import CollapseVertical from '../../../utils/collapseVertical'
  import {selDictonary} from "../../../api/dictionary";
  import ElForm from "element-ui/packages/form/src/form";

  export default {
    components: {
      ElForm,
      CollapseVertical,
      ElFormItem,
      ElButton,
      ParkingDialog,
      ParkingDetailDialog,
      PersonSelectDialog,
      PersonChildDialogRoad,
      PersonChildDialogDw
    },
    name: "fin-detail-form",
    created(){
      selDictonary().then(res=>{
        for(var item in res) {
          if (res[item].id == "cartype") {
            this.cartypes = res[item].comboboxDetailList
          }
          if(res[item].id=="epaytype"){
            this.paytypes=res[item].comboboxDetailList
          }
        }
      })
    },
    data(){
      return{
        position: 'right',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        isDisplay:false,
        dialogDwVisible:false,
        dialogRoadVisible:false,
        dialogSelectPerVisible:false,
        parkingVisible:false,
        model:{
          rangeTime:[new Date(),new Date()],
          account_cartype:'',// 车辆类型 String
          account_chargeunit:'',// 收费路段编号 String
          account_chargeunitname:'',// 收费路段名称 String
          account_epaytype:[],// 支付类型 String
          account_no:'',// 停车流水号 String
          account_orgname:'',// 单位名称 String
          account_orgno:'',// 单位编号 String
          account_park:'',// 停车场编号 String
          account_parkname:'',// 停车场名称 String
          account_place:'',// 泊位编号 String
          account_user:'',// 收费员编号 String
          account_username:'',// 收费员名字 String
        },
        cartypes:[],
        paytypes:[]
      }
    },
    methods:{
      handleSelectDwName(){
      this.dialogDwVisible=true
      },
      selectDwName(val){
        this.model.account_orgname=val.orgname
        this.model.account_orgno=val.orgno
        this.dialogDwVisible=false
      },
      handleSelectParkName(){
      this.parkingVisible=true
      },
      selectParkName(val){
        this.model.account_parkname=val.parkname
        this.model.account_park=val.parkno
        this.parkingVisible=false
      },
      handleSelectRoadName(){
        this.dialogRoadVisible=true
      },
      selectRoadName(val){
        this.model.account_chargeunitname=val.unitname
        this.model.account_chargeunit=val.unit
        this.dialogRoadVisible=false
      },
      handleSelectPerName(){
      this.dialogSelectPerVisible=true
      },
      selectPer(val){
        this.model.account_username=val.name
        this.model.account_user=val.recordno
        this.dialogSelectPerVisible=false
      },
      handleQueryFinDetail(){
        this.$refs['finDetForm'].validate((valid) => {
          if (valid) {
            this.$emit('handleQueryFinDetail',this.model)
          }
        })
      },
      handleResetFinDetail(){
        this.$refs['finDetForm'].resetFields()
      },
      isShow(){
        this.isDisplay =!this.isDisplay
      }

    }
  }
</script>

<style scoped>
  .display{
    display: none;
  }
</style>
